<template>
  <div>
    <!-- <transition name = "headeAbsTransition"> -->
      <router-link tag="div" to="/" class="header-abs" ref="headeAbs" v-if="showAbs">
        <div class="iconfont back-icon">&#xe624;</div>
      </router-link>
    <!-- </transition> -->
    <!-- <transition name = "headFixedTransition"> -->
      <div class="header-fixed" v-if="!showAbs" :style="opacityStyle">
        <router-link to="/">
          <div class="header-left">
            <div class="iconfont back-icon">&#xe624;</div>
          </div>
        </router-link>
        <div class="header-title">景点详情</div>
      </div>
    <!-- </transition> -->
  </div>
</template>

<script>
export default {
  name: 'DatailHeader',
  data () {
    return {
      showAbs: true,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    /**
     * 实现header吸顶以及渐隐渐现效果
     * 1、在activated中绑定滚动条事件scroll
     * 2、定义Header-abs和Header-fixed的显示隐藏条件v-if='showAbs'
     * 3、定义方法handleScroll（当滚动条位置大于60的时候，隐藏Header-abs，否则隐藏Header-fixed）
     * 4、通过opacity和动态样式绑定改变元素透明度实现渐隐渐现效果
     */
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 60) {
        let opacity = scrollTop / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = {
          opacity
        }
        this.showAbs = false
      } else {
        this.showAbs = true
      }
    }
  },
  /**
   * activated生命周期函数，使用keeplive后组件会被缓存，有些moutend不会被执行，activated在每次打开组件都会执行,但是给window绑定事假需要移除掉
   */
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  /**
   * deactivated生命周期函数，组件隐藏时加载的函数，在这里清除掉window事件绑定
   */
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl';
  .header-abs
    position: absolute
    top: .2rem
    left: .2rem
    width: .72rem
    height: .72rem
    background: rgba(0, 0, 0, .5)
    border-radius: .36rem
    line-height: .72rem
    text-align: center
    .back-icon
      font-size: .32rem
      color: #fff
  .header-fixed
    position: fixed
    z-index: 2
    top: 0
    left: 0
    right: 0
    overflow: hidden
    background: $bgColor
    color: #fff
    height: $headerHeight
    font-size: .32rem
    display: flex
    .header-left
      width: .8rem
      float: left
      .back-icon
        text-align: center
        font-size: .4rem
        color: #fff
        line-height: $headerHeight
    .header-title
      flex: 1
      text-align: center
      line-height: $headerHeight
    .header-title::after
      content: ''
      float: right
      height: 100%
      width: .8rem
</style>
